$(document).ready(function() {
	$( ".emaplist-container" ).addClass("ui-widget");
	$.getJSON('assets/data/farmer.json', function(data){
		var mark = "images/mark_a.png";
	    $.each(data.farmers, function(index, farmer){
			$( ".list-container" ).append(
				'<div class="list-item">'+
				'	<div class="left_block item-container">'+
				'		<div class="emaplist-content">'+
				'			<div class="left_block item-mark">'+
				'				<div class="emaplist-content">'+
				'					<img src="'+mark+'" width="21px">'+
				'				</div>'+
				'			</div>'+
				'			<div class="right_block item-content">'+
				'				<div class="emaplist-content">'+
				'					<a href="farmerInformation.html?id_farmer='+farmer.id+'">'+
									farmer.name+'</a>'+
				'					<p>'+farmer.extension+'<br />'+
										farmer.summary+'</p>'+
				'				</div>'+
				'			</div>'+
				'		</div>'+
				'	</div>'+
				'</div>'
			);
			if(mark==="images/mark_a.png"){
				mark="images/mark_b.png";
			}else if(mark==="images/mark_b.png"){
				mark="images/mark_c.png";
			}else if(mark==="images/mark_c.png"){
				mark="images/mark_d.png";
			}else{
				mark="images/mark_a.png";
			}
	    });
	}).done(function(){
		$( ".list-container" ).append(
			'<div class="bottom_block list-pagination">lllllll</div>'
		);
		$( ".item-container" ).addClass("ui-corner-all ui-widget-content");
		$( ".map-container" ).hide().fadeIn(1000);
		$( ".item-container" ).hide().show("fade",1000);
		$( ".list-pagination" ).hide().show("drop",1000);
		loadPagination();
		var idx = [ 0 ,1, 2, 3];
		loadMap(idx);
	}).fail(function(){
		alert("Fail: maybe the farmers data does not exists or is not json...");
	});
});